'use client';

import React, { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import Link from 'next/link';
import { useAuthStore } from '@/store/useAuthStore';
import MainLayout from '@/components/layout/MainLayout';

const HomePage = () => {
  const { isAuthenticated, isLoading } = useAuthStore();
  const router = useRouter();

  useEffect(() => {
    // 如果已经认证，重定向到仓库页面
    if (isAuthenticated) {
      router.push('/repositories');
    }
  }, [isAuthenticated, router]);

  return (
    <MainLayout>
      <div className="bg-white dark:bg-gray-900">
        <div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-24 lg:px-8">
          <div className="text-center">
            <h1 className="text-4xl font-extrabold tracking-tight text-gray-900 dark:text-white sm:text-5xl md:text-6xl">
              <span className="block">QuickGit</span>
              <span className="block text-green-600 dark:text-green-500">Gitee 第三方客户端</span>
            </h1>
            <p className="mt-3 max-w-md mx-auto text-base text-gray-500 dark:text-gray-400 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
              快速、简洁的 Gitee 代码浏览和编辑工具，让您的开发工作更加高效。
            </p>
            <div className="mt-10 sm:flex sm:justify-center">
              {isLoading ? (
                <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-green-500"></div>
              ) : (
                <>
                  {!isAuthenticated && (
                    <div className="rounded-md shadow">
                      <Link
                        href="/login"
                        className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-green-600 hover:bg-green-700 md:py-4 md:text-lg md:px-10"
                      >
                        立即登录
                      </Link>
                    </div>
                  )}
                  <div className="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
                    <a
                      href="https://gitee.com"
                      target="_blank"
                      rel="noopener noreferrer"
                      className="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-green-600 bg-white hover:bg-gray-50 dark:bg-gray-800 dark:text-green-500 dark:hover:bg-gray-700 md:py-4 md:text-lg md:px-10"
                    >
                      了解 Gitee
                    </a>
                  </div>
                </>
              )}
            </div>
          </div>
        </div>

        <div className="bg-gray-50 dark:bg-gray-800">
          <div className="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:py-24 lg:px-8">
            <div className="max-w-3xl mx-auto text-center">
              <h2 className="text-3xl font-extrabold text-gray-900 dark:text-white">主要功能</h2>
              <p className="mt-4 text-lg text-gray-500 dark:text-gray-400">
                QuickGit 提供了丰富的功能，帮助您更高效地管理和使用 Gitee 仓库。
              </p>
            </div>
            <dl className="mt-12 space-y-10 sm:space-y-0 sm:grid sm:grid-cols-2 sm:gap-x-6 sm:gap-y-12 lg:grid-cols-3 lg:gap-x-8">
              {[
                {
                  name: '仓库浏览',
                  description: '快速浏览您的所有 Gitee 仓库，包括私有仓库和公开仓库。',
                },
                {
                  name: '代码查看',
                  description: '支持多种编程语言的语法高亮，让代码阅读更加清晰。',
                },
                {
                  name: '在线编辑',
                  description: '直接在浏览器中编辑代码，无需下载到本地。',
                },
                {
                  name: '文件管理',
                  description: '浏览、创建、编辑和删除仓库中的文件和目录。',
                },
                {
                  name: '分支管理',
                  description: '切换不同的分支，查看不同版本的代码。',
                },
                {
                  name: '提交历史',
                  description: '查看代码的提交历史，了解代码的演变过程。',
                },
              ].map((feature) => (
                <div key={feature.name} className="relative">
                  <dt>
                    <div className="absolute flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white">
                      <svg className="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                      </svg>
                    </div>
                    <p className="ml-16 text-lg leading-6 font-medium text-gray-900 dark:text-white">{feature.name}</p>
                  </dt>
                  <dd className="mt-2 ml-16 text-base text-gray-500 dark:text-gray-400">{feature.description}</dd>
                </div>
              ))}
            </dl>
          </div>
        </div>
      </div>
    </MainLayout>
  );
};

export default HomePage;
